// JavaScript Document

//<script src="css/jquery.js"></script>
//<script src="css/bootstrap.js"></script>
//<link href="css/bootstrap.css" rel="stylesheet">


// 创建一个canvas组件的函数
var createCanvas = function(rows, cols, cellWidth, cellHeight) {
	//alert(1);
	tetris_canvas = document.createElement("canvas");
	// 设置canvas组件的高度和宽度；
	tetris_canvas.width = cols * cellWidth;
	tetris_canvas.height = rows * cellHeight;
	// 设置canvas组件的边框；
	tetris_canvas.style.border = "1px solid black";
	// 获取canvas的绘图api
	tetris_ctx = tetris_canvas.getContext('2d');
	// 开始创建路径；

	tetris_ctx.beginPath();
	// 绘制横向的网格所对应的路径；
	// 打印这些数值f
	for (var i = 1; i < rows; i++) {
		tetris_ctx.moveTo(0, i * cellHeight);
		// alert("succeed1");
		tetris_ctx.lineTo(cols * cellWidth, i * cellHeight);
	}

	// 绘制竖向的网格对应的路径
	for (var i = 1; i < cols; i++) {
		tetris_ctx.moveTo(i * cellWidth, 0);
		tetris_ctx.lineTo(i * cellWidth, rows * cellHeight);
	}
	
	tetris_ctx.moveTo((cols-1) * cellWidth, rows * cellHeight);//不加这句话会导致多画一条线
	tetris_ctx.closePath();
	// 设置画笔的颜色
	tetris_ctx.strokeStyle = "#8e44ad";
	tetris_ctx.lineWidth = 0.4;
	tetris_ctx.stroke();
}



var initialize=function() {
	// 该数组用于记录已经固定的方块；
	tetris_status = [];
	for (var i=0 ; i<TETRIS_ROWS;i++)
	{
		tetris_status[i]=[];
		for(var j= 0;j<TETRIS_COLS;j++){
		tetris_status[i][j]=NO_BLOCK;// 初始化
		
		}
	}
	
	//定义用于存储颜色的colors[]数组
	colors =new Array();
	colors[0]="#ecf0f1";
	colors[1]="#c0392b";
	colors[2]="#d35400";
	colors[3]="#f1c40f";
	colors[4]="#2ecc71";
	colors[5]="#16a085";
	colors[6]="#3498db";
	colors[7]="#8e44ad";

	//alert("颜色");
	// 用于定义几种可能出现的方块组合
	blockArr = [
				//第一种可能出现的方块组合；z
					[
					 {x:TETRIS_COLS/2-1,y:0,color:1},
					 {x:TETRIS_COLS/2,y:0,color:1},
					 {x:TETRIS_COLS/2,y:1,color:1},
					 {x:TETRIS_COLS/2+1,y:1,color:1}
					 ],
				//第二种可能出现的组合：反z
					 [
					 {x:TETRIS_COLS/2+1,y:0,color:2},
					 {x:TETRIS_COLS/2,y:0,color:2},
					 {x:TETRIS_COLS/2,y:1,color:2},
					 {x:TETRIS_COLS/2-1,y:1,color:2}
					 ],
				//第三种可能出现的组合：	田
					 [
					 {x:TETRIS_COLS/2-1,y:0,color:3},
					 {x:TETRIS_COLS/2,y:0,color:3},
					 {x:TETRIS_COLS/2-1,y:1,color:3},
					 {x:TETRIS_COLS/2,y:1,color:3}
					 ],	                
				//第四种可能出现的组合：	L
					 [
					 {x:TETRIS_COLS/2-1,y:0,color:4},
					 {x:TETRIS_COLS/2-1,y:1,color:4},
					 {x:TETRIS_COLS/2-1,y:2,color:4},
					 {x:TETRIS_COLS/2,y:2,color:4}
					 ],	                 
				//第五种可能出现的组合：	J
					 [
					 {x:TETRIS_COLS/2,y:0,color:5},
					 {x:TETRIS_COLS/2,y:1,color:5},
					 {x:TETRIS_COLS/2,y:2,color:5},
					 {x:TETRIS_COLS/2-1,y:2,color:5}
					 ],	                
				//第六种可能出现的组合：	I
					 [
					 {x:TETRIS_COLS/2,y:0,color:6},
					 {x:TETRIS_COLS/2,y:1,color:6},
					 {x:TETRIS_COLS/2,y:2,color:6},
					 {x:TETRIS_COLS/2,y:3,color:6}
					 ],	    	                
				//第七种可能出现的组合：	凸
					 [
					 {x:TETRIS_COLS/2,y:0,color:7},
					 {x:TETRIS_COLS/2-1,y:1,color:7},
					 {x:TETRIS_COLS/2,y:1,color:7},
					 {x:TETRIS_COLS/2+1,y:1,color:7}
					 ]	                
				];
	
}

//定义初始化正在掉落的方块
// 定义数据模型 用于记录当前下落的方块状态；
var initBlock=function()
{
	//rand是指第几种方块；
	var rand = Math.floor(Math.random()*blockArr.length);
	currentFall = [ {
		x : blockArr[rand][0].x,
		y : blockArr[rand][0].y,
		color : blockArr[rand][0].color
	}, {
		x : blockArr[rand][1].x,
		y : blockArr[rand][1].y,
		color : blockArr[rand][1].color
	}, {
		x : blockArr[rand][2].x,
		y : blockArr[rand][2].y,
		color : blockArr[rand][2].color
	}, {
		x : blockArr[rand][3].x,
		y : blockArr[rand][3].y,
		color : blockArr[rand][3].color
	} ];
	
}




//控制方块往下掉的过程
var moveDown = function(){
	//定义能否掉落的的开关；	
	var canDown = true;//1;
	//遍历每个方块，判断是否可以向下掉落
	
	for(var i= 0 ;i<currentFall.length;i++)
	{
		
		
		//判断是否已经到了最底下
		if(currentFall[i].y>=TETRIS_ROWS-1)
		{
			canDown=false;
			break;
		}
		//alert(tetris_status[currentFall[i].y+1][currentFall[i].x]);
		//判断下一格是否有方块，如果有则不能向下掉落；
		if(tetris_status[currentFall[i].y+1][currentFall[i].x]!=NO_BLOCK)
		{
		canDown = false;
		break;
		}
	}	
	//如果可以向下掉落 
	if(canDown)
	{
		//alert(1);
		//将下移之前的每个方块的背景色改成白色；
		for(var i= 0;i<currentFall.length;i++)
		{
		var cur =currentFall[i];
		tetris_ctx.fillStyle = 'white';//设置填充颜色
		//绘制矩形
		
		tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);		
		}
		//遍历每个方块，控制每个方块的y坐标加一；使每个方块向下掉落一格；
		for (var i= 0;i<currentFall.length;i++)
		{
			var cur =currentFall[i];
			cur.y++;
		}
		
		//将每个下移后的方块的背景涂成该方块的颜色；
		for (var i= 0;i<currentFall.length;i++)
		{
			
			var cur =currentFall[i];
			//设置填充的颜色；
			tetris_ctx.fillStyle=colors[cur.color];
			//绘制矩形
		
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
		}	
		//alert(2);		
	}
	//如果下落失败的话
	else
	{
		//clearInterval(curTimer);
		//遍历每个方块，把每个方块的值记录到tetris_status数组中；
		for(var i= 0;i<currentFall.length;i++)
		{
			
			var cur = currentFall[i];
			if(cur.y<2)
			{
				//清空Local Storage 中的积分值，游戏状态，当前速度；
				localStorage.removeItem("curScore");
				localStorage.removeItem("tetris_status");
				localStorage.removeItem("curSpeed");
				if(confirm("您输了,是否参与排名？"));
				{
					//读取Local Storage里的maxScore记录
					maxScore = localStorage.getItem("maxScore");
					maxScore = maxScore == null?0:maxScore;
					//如果当前积分大于localStorage 中记录的最高积分
					if(curScore >= maxScore)
					{
						//记录最高积分;
						localStorage.setItem("maxScore",curScore);
					}
				}
				isPlaying = false;//游戏结束
				//清除计时器；
				clearInterval(curTimer);
				return;
			}
			//把每个方块所在的位置复制为当前方块的颜色；
			tetris_status[cur.y][cur.x]=cur.color;
		
		}
		//判断是否有可以消除的行
		lineFull();
		//使用Local Storage 记录俄罗斯方块的游戏状态；
		localStorage.setItem("tetris_status",JSON.stringify(tetris_status));
		//开始一组新的方块
		initBlock();
		
		
	}
	
}

//判断是否有一行已经满了
var lineFull = function()
{

	//依次遍历每一行
	for(var i=0 ;i<TETRIS_ROWS;i++)
	{
		var flag = true ;
		// 遍历当前的每一个单元格；
		for (var j= 0;j<TETRIS_COLS;j++)
		{
			if(tetris_status[i][j]==NO_BLOCK)
			{
				flag  = false;
				break;
			}
		}
		//如果当前行已经全部都用方块了；
		if(flag)
		{
			//将当前的积分增加100
			curScoreEle.innerHTML = curScore+=100;
			//记录当前的积分；
			localStorage.setItem("curScore",curScore);
			//如果当前积分达到升级极限；
			if(curScore >= curSpeed * curSpeed * 500)
			{
				curSpeedEle.innerHTML= curSpeed += 1 ;
				//使用Local Storage 记录 curSpeed 
				localStorage.setItem("curSpeed",curSpeed);
				clearInterval(curTimer);
				//增加方块下落速度；
				curTimer = setInterval("moveDown()",500/curSpeed);
				
			}
			//把当前行的所有方块下移一行；
			for(var k = i ; k>0 ;k--)
			{
				for (var l= 0;l<TETRIS_COLS;l++)
				{
					tetris_status[k][l]=tetris_status[k-1][l];
				}
			}
			//消除方块后，重新绘制一遍方块；
			drawBlock();  
		}	
	}	
}

//绘制俄罗斯方块的状态；
var drawBlock = function()
{
	for (var i = 0 ;i<TETRIS_ROWS;i++)
	{
		for (var j = 0 ;j<TETRIS_COLS;j++)
		{
			//在有方块的地方绘制颜色；
			if(tetris_status[i][j] != NO_BLOCK)
			{
				//设置填充的颜色；
				tetris_ctx.fillStyle = colors[tetris_status[i][j]];
				//绘制矩形；
				tetris_ctx.fillRect(j*CELL_SIZE+1,i*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
			}
			//在没有方块的地方画上白色；
			else 
			{
				//设置白色
				tetris_ctx.fillStyle = 'white';
				//绘制矩形
				tetris_ctx.fillRect(j*CELL_SIZE+1,i*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
			}
		}
	}
}


//为窗口的按键事件绑定事件监听器；
window.onkeydown =  function(evt)
{
	switch(evt.keyCode)
	{
		//按下了“向下”箭头
		case 40:
			if(!isPlaying)
				return;
			moveDown();
			break;
		//按下了“向左”的箭头	
		case 37:
			if(!isPlaying)
				return;
			moveLeft();
			break;
		//按下了“向右”的箭头
		case 39:
			if(!isPlaying)
				return;
			moveRight();
			break;
		//按下了“向上”的箭头
		case 38:
			if(!isPlaying)
				return;
			rotate();
			break;
		//处于兼容性考虑 wasd也可以使用；
			
			
		//按下了“s”箭头
		case 83:
			if(!isPlaying)
				return;
			moveDown();
			break;
		//按下了“a”的箭头	
		case 65:
			if(!isPlaying)
				return;
			moveLeft();
			break;
		//按下了“d”的箭头
		case 68:
			if(!isPlaying)
				return;
			moveRight();
			break;
		//按下了“w”的箭头
		case 87:
			if(!isPlaying)
				return;
			rotate();
			break;
			
	}
}


//定义向左移的方块的函数；
var moveLeft = function()
{

	//定义能否左移的旗标
	var canLeft = true;
	for (var i = 0 ; i<currentFall.length; i++)
	{
		//如果已经到了最左边，则不能左移
		if(currentFall[i].x<= 0 )
		{
			canLeft = false;
			break;
		}
		//或者左边已经有了方块，则不可以左移；
		if(tetris_status[currentFall[i].y][currentFall[i].x-1]!=NO_BLOCK)
		{
			canLeft = false;
			break;
			
		}
		
		
	}
	//如果可以左移；
	if(canLeft)
	{
		//将左移之前的每个方块的背景涂成白色
		for(var i = 0 ;i<currentFall.length;i++)
		{
			var cur = currentFall[i];
			//设置填充的颜色
			tetris_ctx.fillStyle = 'white';
			//绘制矩形
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
			
		}
		//左移所有正在掉落的方块；
		for(var i= 0;i<currentFall.length;i++)
		{
			var cur = currentFall[i];
			cur.x --;

		}	
		//将左移后的每个方块背景涂成对应得颜色；
		for(var i = 0 ; i < currentFall.length; i++ )
		{
			var cur = currentFall[i];
			//设置要填充的颜色；
			tetris_ctx.fillStyle= colors[cur.color];
			//绘制矩形；
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
			
		}
	}
}


//定义向右移的方块的函数；
var moveRight = function()
{
	//定义能否右移的旗标
	var canRight = true;
	for (var i = 0 ; i<currentFall.length; i++)
	{
		//如果已经到了最右边，则不能右移
		if(currentFall[i].x>= TETRIS_COLS - 1 )
		{
			canRight = false;
			break;
		}
		//或者左边已经有了方块，则不可以左移；
		if(tetris_status[currentFall[i].y][currentFall[i].x+1]!=NO_BLOCK)
		{
			canRight = false;
			break;
			
		}
		
		
	}
	//如果可以右移；
	if(canRight)
	{
		//将右移之前的每个方块的背景涂成白色
		for(var i = 0 ;i<currentFall.length;i++)
		{
			var cur = currentFall[i];
			//设置填充的颜色
			tetris_ctx.fillStyle = 'white';
			//绘制矩形
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
			
		}
		//左移所有正在掉落的方块；
		for(var i= 0;i<currentFall.length;i++)
		{
			var cur = currentFall[i];
			cur.x ++;

		}	
		//将左移后的每个方块背景涂成对应得颜色；
		for(var i = 0 ; i < currentFall.length; i++ )
		{
			var cur = currentFall[i];
			//设置要填充的颜色；
			tetris_ctx.fillStyle= colors[cur.color];
			//绘制矩形；
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
			
		}
	}
}



//定义旋转方块的函数；
var rotate = function()
{	

	//定义记录能否旋转的旗标
	var canRotate = true;
	for (var i = 0 ; i<currentFall.length;i++)
	{
		var preX = currentFall[i].x;
		var preY = currentFall[i].y;
		//始终以第三个方块为旋转中心；
		//当i==2 的时候说明是旋转中心；
		if( i!=2 )
		{
			//计算方块旋转后的x、y 坐标；
			var afterRotateX = currentFall[2].x +preY-currentFall[2].y;
			var afterRotateY = currentFall[2].y + currentFall[2].x-preX;
			
			//如果旋转后的坐标已经超出了最左边的边界,则向右移动
			for(var k=0;k<3;k++)
			{
				//alert(afterRotateX);
				if(afterRotateX<0)
				{
					
					moveRight();
					preX = currentFall[i].x;
					preY = currentFall[i].y;
					afterRotateX = currentFall[2].x +preY-currentFall[2].y;
					afterRotateY = currentFall[2].y +currentFall[2].x-preX;
					
					if(afterRotateX>=0)
					{
						break;
					}
				}
			}
			
			//如果旋转后的坐标已经超过了右边界；
			for(var k=0;k<3;k++)
			{
				if(afterRotateX>=TETRIS_COLS)
				{	
					//alert(tetris_status[afterRotateY][afterRotateX+1]!=NO_BLOCK);
					moveLeft();
					afterRotateX = currentFall[2].x +preY-currentFall[2].y;
					afterRotateY = currentFall[2].y +currentFall[2].x-preX;
					if(afterRotateX<TETRIS_COLS)
						{
							break;
						}
					
				}
			}
			
			//如果哦旋转后所在的位置已经存在方块，则表示不能旋转；
			if(tetris_status[afterRotateY][afterRotateX]!=NO_BLOCK)
			{	
				alert(afterRotateX);
				alert("test");
				canRotate = false;
				break;
				
			}
			
			
		}
	}
	//如果能旋转；
	if(canRotate)
	{
		
		//将旋转前的每个方块的背景涂成白色；
		for (var i = 0;i< currentFall.length;i++)
		{
			var cur = currentFall[i];
			//设置填充颜色；
			tetris_ctx.fillStyle = 'white' ; 
			// 绘制矩形 
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
		}		
			
		for (var i= 0 ;i<currentFall.length;i++)
		{
			var preX = currentFall[i].x;
			var preY = currentFall[i].y;
			//始终以第三个方块为旋转中心；
			//当i==2 的时候说明是旋转中心；
			if(i!=2)
			{
				currentFall[i].x=currentFall[2].x+preY-currentFall[2].y;
				currentFall[i].y=currentFall[2].y+currentFall[2].x-preX;
			}	
		}
		
		//将旋转后的每个方块的背景涂成各方块对应的颜色
		for(var i=0;i<currentFall.length;i++)
		{
			var cur = currentFall[i];
			//设置填充颜色
			tetris_ctx.fillStyle = colors[cur.color];
			//绘制矩形
			tetris_ctx.fillRect(cur.x*CELL_SIZE+1,cur.y*CELL_SIZE+1,CELL_SIZE-2,CELL_SIZE-2);
		}

	}

}







// 当页面加载完成的时候 加载组件
window.onload = function() {
	
	//初始化一些必要的参数
	TETRIS_ROWS = 24;// 行数
	TETRIS_COLS = 14;// 列数
	CELL_SIZE = 24;// 方块的尺寸
	NO_BLOCK = 0;// 指示空方格
	isPlaying =true;
	
	//创建canvas组件
	createCanvas(TETRIS_ROWS, TETRIS_COLS, CELL_SIZE, CELL_SIZE);
	document.body.appendChild(tetris_canvas);
	
	//初始化
	initialize();

	//加载积分栏；
	curScoreEle = document.getElementById("curScoreEle");
	curSpeedEle = document.getElementById("curSpeedEle");
	maxScoreEle = document.getElementById("maxScoreEle");
	//读取Local Strage 里的tetris_status 记录；
	var tmpStatus = localStorage.getItem("tetris_status");
	tetris_status = tmpStatus == null?tetris_status : JSON.parse(tmpStatus);
	//把方块的状态绘制出来
	drawBlock();
	//读取Local storage 中的curScore 记录；
	curScore = localStorage.getItem("curScore");
	curScore = curScore == null ? 0 : parseInt(curScore);
	curScoreEle.innerHTML = curScore;
	// 读取Local Storage 里maxScore 记录俄罗斯方块的游戏状态；
	maxScore =localStorage.getItem("maxScore");
	maxScore = maxScore == null ? 0 : parseInt(maxScore);
	maxScoreEle.innerHTML = maxScore;
	//读取Local Storage 里的curSpeed 记录；
	curSpeed = localStorage.getItem("curSpeed");
	curSpeed = curSpeed == null ? 1 : parseInt(curSpeed);
	curSpeedEle.innerHTML = curSpeed ;
	
	
	
	
	
	
	
	//rand暂时为10

	//初始化正在掉落的方块
	initBlock();
	curTimer=self.setInterval("moveDown()",500/curSpeed);
	
}
